<template>
  <div class="record-list-container">
    <van-list
      class="list"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <TransitionGroup name="list" tag="ul">
        <div v-for="(item, index) of list" :key="item">
          <recordCell @onSelectItem="onSelectItem(item)" :item="item" />
          <van-divider v-show="pinnedNum === index + 1" />
        </div>
      </TransitionGroup>
    </van-list>
    <div class="bottom-view">
      <div v-if="!batchEdit" class="flex flex-row items-center" @click="begainBatchEdit">
        <van-icon name="setting-o" style="margin-right: 10px" />
        <p>批量管理</p>
      </div>
      <div v-else class="flex flex-row items-center justify-between" style="width: 100%">
        <van-checkbox
          shape="square"
          checked-color="#436BFF"
          icon-size="16px"
          v-model="checkedAll"
          :indeterminate="isIndeterminate"
          @click="onClickCheckBox"
          v-show="batchEdit"
          >全选</van-checkbox
        >
        <div class="flex flex-row items-center">
          <p @click="endBatchEdit">取消</p>
          <div class="line"></div>
          <p @click="onConfirmDelete">确认删除</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import recordCell from "./recordCell.vue";
import { ref, onMounted, computed, defineEmits } from "vue";
import { useProductStore } from "@/store";
import { showConfirmDialog } from 'vant';

const store = useProductStore();
const emit = defineEmits(["onSelectItem"]);

onMounted(() => {
  page.value = 0;
  // store.getChatListAction(page.value,pageSize);
});

const list = computed(() => {
  return store.recordList;
});

const pinnedNum = computed(() => {
  return store.recordList.reduce((prev, cur) => prev + cur.pinned, 0);
});

function onSelectItem(item) {
  emit("onSelectItem");
  store.onSelectRecordItem(item);
}

const page = ref(0);
const pageSize = 20;
const loading = ref(false);
const finished = ref(false);

async function onLoad() {
  page.value += 1;
  if (page.value === 1) {
    finished.value = false;
  }
  const data = await store.getChatListAction(page.value, pageSize);
  if (data.datas.length < pageSize) {
    finished.value = true;
  }
  loading.value = false;
  console.log("onLoad list :>> ", data);
}

const batchEdit = computed(() => {
  return store.isBatchEdit;
});

function begainBatchEdit() {
  store.begainBatchEdit();
}

function endBatchEdit() {
  checkedAll.value = false;
  store.endBatchEdit();
}

const checkedAll = ref(
  store.onCheckedRecord.length === store.recordList.length &&
    store.onCheckedRecord.length !== 0
);
const isIndeterminate = computed(() => {
  const checkedNum = store.onCheckedRecord.length;
  return checkedNum !== store.recordList.length && checkedNum !== 0;
});

function onClickCheckBox() {
  store.changeAllRecordChecked(checkedAll.value);
}

function onConfirmDelete() {
  showConfirmDialog({
    title: "提示",
    message: " 删除后将无法回退，确认删除吗?",
  })
    .then(() => {
      store.deleteGoodsChatInfoAction(store.onCheckedRecord);
      endBatchEdit();
    })
    .catch(() => {
      // on cancel
    });
}
</script>

<style scoped lang="less">
.record-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .bottom-view {
    width: 100%;
    height: 52px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 24px;
    border-top: 1px solid #e9e9e9;

    p {
      margin: 0;
    }
  }

  .list {
    width: 100%;
    padding: 0 20px;
    overflow-y: auto;
    flex: 1;
  }

  .line {
    width: 1px;
    height: 14px;
    margin: 0 8px;
    background-color: #f0f0f0;
  }
}

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.list-leave-active {
  position: absolute;
}
</style>
